import React, { useState, useEffect } from 'react'
import { useSearchParams, Link } from 'react-router-dom'
import { chapterDetail, chapter } from '../api/index'
import '../static/less/chapter.less'
export default function Chapter() {
  const [searchParams, setSearchParams] = useSearchParams();
  let [id, setId] = useState(searchParams.get('id'));
  let [did, setDid] = useState(searchParams.get('did'));
  let [name, setName] = useState(searchParams.get('name'));
  let [picList, setPicList] = useState([]);
  let [list, setList] = useState([]);
  let [cList, setcList] = useState([]);
  let [isBlock, setIsBlock] = useState(false);
  const ChapterFn = async () => {
    await chapterDetail({ id: id }).then(
      content => {
        // console.log(content);
        let { code, data } = content;
        if (code == 200) {
          setPicList(data.piclist);
          setList(data);
        }
      }
    )
  }

  const chapterFn = async () => {
    await chapter({ id: did }).then(
      content => {
        // console.log(content);
        let { code, data } = content;
        if (code == 200) {
          // console.log(data);
          setcList(data);
        }
      }
    )
  }

  const leftChapter = () => {
    cList.map((item, i) => {
      if (id == item.id && i != 0) {
        setId(cList[i - 1].id)
        // console.log(`第${i}话`);
      }
    })
  }

  const rightChapter = () => {
    cList.map((item, i) => {
      if (id == item.id && i != cList.length) {
        setId(cList[i + 1].id)
        // console.log(`第${i+2}话`);
      }
    })
  }

  const IsChapterFn = (id)=>{
    setId(id);
  }

  // 初始化 
  useEffect(() => {
    ChapterFn();
    chapterFn();
  }, [id])

  return (
    <div className='chapter'>
      <div className='top'>
        <div className='back' onClick={
          () => {
            window.history.back();
          }
        }></div>
        <h2 className='top-title'>{name}</h2>
      </div>
      <div className='picList'>
        {
          picList.map((item, i) => {
            return (
              <img className='pic' src={item.url} alt="" key={i} />
            )
          })
        }
      </div>
      <div className='bottom'>
        <div className='mulu'>
          <i className='left' onClick={() => {
            leftChapter();
          }}></i>
          <span onClick={() => {
            let v = !isBlock;
            setIsBlock(v);
          }}>{list.name}</span>
          <i className='right' onClick={() => {
            rightChapter();
          }}></i>
        </div>
        <div className='mulu_boxs' style={{ display: isBlock == true ? 'block' : 'none' }}>
          <div className='mulu_title'><h3>目录</h3></div>
          {
            cList.map((item, i) => {
              return (
                <div className="mulu_box" key={i} onClick={()=>{
                  IsChapterFn(item.id);
                }}>
                  <img className='mulu_pic' src={item.cover} alt="" key={i} />
                  <div className='mulu_right'>
                    <div className='hua' style={{fontSize: item.name == list.name ? '22px' : '20px',color: item.name == list.name ? '#000' : '#ccc'}} 
                    >{item.name}</div>
                    <div className='mulu_num'>
                      <div className='mulu_comment'><i className='comment'></i>{item.num_comment}</div>
                      <div className='mulu_love'><i className='love'></i>{item.num_love}</div>
                    </div>
                    <div className='time'>{new Date(item.createtime).toLocaleString()}</div>
                  </div>
                </div>
              )
            })
          }
        </div>
      </div>
    </div>
  )
}

